<template>
<div class="myAsset">
  <div class="header">
    <span class="line"></span>
    <div class="text">资产分析</div>
    <span class="line"></span>
  </div>
  <div class="button">
    <div class="left" @click='changeLeft' :class="{'activeBlue':selectedIndex==0,'activeWhite':selectedIndex==1}">资产统计</div>
    <div class="right" @click='changeRight' :class="{'activeBlue':selectedIndex==1,'activeWhite':selectedIndex==0}">累计盈亏</div>
  </div>
  <div class="assetContent" v-if="status == 'exhibition'">
    <ul v-show='showLeft'>
      <li v-for='item,index in assetList'>
        <span class="li-left">
						<img src="../../../assets/images/point2x.png" alt="" />
					</span>
        <span class="li-center" v-text='item.name'></span>
        <span class="li-right" v-text='item.value'></span>
      </li>
    </ul>
    <div class="myAssetChart" v-show='!showLeft'>
      <div ref="myAssetCharts" style="width:100%;height:200px"></div>
    </div>
  </div>
  <return-empty v-if="status == 'empty'"></return-empty>
  <return-error v-if="status == 'error'"></return-error>
</div>
</template>
<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/grid'
import RemoteDAO from '@/common/remoteDAO'
import constant from '@/common/constant'
import tools from '@/common/tools'
import shPoint from '@/assets/images/shPoint.png'

let arrLength = 0
let sumYData = [0]
const assetOption = {
  tooltip: {
    trigger: 'axis',
    confine: true,
    backgroundColor: 'rgba(0,0,0,.4)',
    formatter: (params) => {
      return `${params[0].axisValue}<br/>
        <div style="display:inline-block; width:10px; height:10px; border-radius:50%; background:${params[0].color}"></div>&nbsp;
        当日盈亏：${params[0].data}元<br/>
        <div style="display:inline-block; width:10px; height:10px; border-radius:50%; background:rgba(0,0,0,0)"></div>&nbsp;
        累计盈亏：${sumYData[params[0].dataIndex]}元`
    },
    axisPointer: {
      type: 'line',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  color: ['#2EAAFF'],
  grid: {
    show: false,
    left: '0',
    right: '0',
    bottom: '0%',
    top: '8%',
    containLabel: true
  },
  xAxis: [{
    show: true,
    axisLine: {
      show: true,
      onZero: false,
      lineStyle: {
        color: '#c9daeb'
      }
    },
    axisLineTick: {
      show: false
    },
    splitLine: {
      show: false
    },
    type: 'category',
    boundaryGap: false,
    axisTick: {
      show: false
    }
  }],
  yAxis: [{
    show: true,
    axisLine: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['#bac9d8'],
        type: 'dotted'
      }
    },
    splitNumber: 2,
    axisLineTick: {
      show: false
    },
    type: 'value',
    axisLabel: {
      textStyle: {
        color: '#999'
      },
      inside: true
    },
    axisTick: {
      show: false
    }
  }],
  series: [{
    name: '累计收益',
    type: 'line',
    symbol: 'image://' + shPoint,
    symbolSize: 10,
    showSymbol: false,
    areaStyle: {
      normal: {
        color: 'rgba(48,159,234,0.1)'
      }
    }
  }]
}
export default {
  props: {
    fathertime: {
      type: Number
    },
    assetData: {
      type: Array
    },
    status: {
      type: String,
      default: 'exhibition'
    }
  },
  computed: {
    assetList() {
      return this.assetData.map((item, index) => {
        return {
          name: this.assetNames[index],
          value: item
        }
      })
    }
  },
  data() {
    return {
      assetNames: ['初期净资产', '转入', '转出', '日均资产', '期末净资产'],
      showLeft: true,
      classLeft: 'activeBlue',
      classRight: 'activeWhite',
      rightBtn: '',
      timeIn: '',
      tradedate: '',
      pagenum: '',
      AssetChart: '',
      xData: [],
      yData: [],
      selectedIndex: 0,
      setAssetIndex: 0,
      clickStatus: 0
    }
  },
  created() {
    this.setAssetIndex = this.$store.state.myAssetIndex;
    if (this.setAssetIndex == 0) {
      this.changeLeft()
    } else {
      this.changeRight()
    }
  },
  watch: {
    fathertime: function() {
      if (this.rightBtn) {
        let obj0042 = {
          'pagenum': constant.TimeTabData[this.fathertime].num,
          'tradedate': this.$store.state.dateOptions
        }
        RemoteDAO.callZL13100042(obj0042, this.ZL13100042);
      }
    }
  },
  beforDestroy() {
    echarts.dispose(this.AssetChart);
  },
  methods: {
    error() {
      this.status = 'error'
    },
    empty() {
      this.status = 'empty'
    },
    exhibition() {
      this.status = 'exhibition'
    },
    changeLeft() {
      this.showLeft = true;
      this.selectedIndex = 0;

      this.$store.dispatch('setMyAssetIndex', this.selectedIndex);

      this.rightBtn = ''


      if (this.clickStatus == 1) {
        TDAPP.onEvent('002011', '');
        TDAPP.send();
        this.clickStatus = 0
      }
    },
    changeRight() {
      this.showLeft = false;
      this.rightBtn = 'true';
      this.selectedIndex = 1;

      this.$store.dispatch('setMyAssetIndex', this.selectedIndex);

      let obj0042 = {
        'pagenum': constant.TimeTabData[this.fathertime].num,
        'tradedate': this.$store.state.dateOptions
      }
      RemoteDAO.callZL13100042(obj0042, this.ZL13100042);

      if (this.clickStatus == 0) {
        TDAPP.onEvent('002012', '');
        TDAPP.send();
        this.clickStatus = 1
      }
    },
    ZL13100042(result) {
      let vm = this;
      if (result.error == '1') {
        vm.error();
      } else {
        let data = result.data;
        let bigdata = JSON.parse(data).body[0].bigdata;
        let specData = JSON.parse(bigdata).hits.hits;
        if (specData.length == 0) {
          vm.empty();
        } else {
          vm.exhibition();
          vm.xData = [''];
          vm.yData = [0];
          sumYData = [0];
          specData.forEach(function(item, i) {
            let tDate = item._source.tradedate + ''
            let tYear = tDate.slice(0, 4)
            let tMonth = tDate.slice(4, 6)
            let today = tDate.slice(6, 8);

            tDate = tYear + '/' + tMonth + '/' + today
            vm.xData.push(tDate);
            vm.yData.push(item._source.day_profit_total)
            if (i == 0) {
              sumYData.push(item._source.day_profit_total)
            } else {
              let num = (sumYData[i] + item._source.day_profit_total).toFixed(2)
              sumYData.push(parseFloat(num))
            }
          });
          if (vm.fathertime == 0 || vm.fathertime == 1) {
            vm.xData = this.xDataExpand(vm.xData)
          }
          arrLength = vm.xData.length
          if (vm.AssetChart) {
            vm.AssetChart.setOption({
              xAxis: [{
                data: vm.xData,
                axisLabel: {
                  interval: Math.ceil(arrLength / 5) - 1,
                  textStyle: {
                    algin: 'center',
                    color:'#999'
                  },
                  formatter: (val, index) => {
                    if (index > arrLength - 2) {
                      return ''
                    } else {
                      return val
                    }
                  }
                }
              }],
              series: [{
                data: vm.yData
              }]
            })
          } else {
            vm.$nextTick(() => {
              vm.AssetChart = echarts.init(vm.$refs.myAssetCharts);
              vm.AssetChart.setOption(assetOption);
              vm.AssetChart.setOption({
                xAxis: [{
                  data: vm.xData,
                  axisLabel: {
                    interval: Math.ceil(arrLength / 5) - 1,
                    textStyle: {
                      algin: 'center',
                      color:'#999'
                    },
                    formatter: (val, index) => {
                      if (index > arrLength - 3) {
                        return ''
                      } else {
                        return val
                      }
                    }
                  }
                }],
                series: [{
                  data: vm.yData
                }]
              })
            })
          }
        }
      }
    },
    transformTime() {
      this.timeIn = constant.TimeTabData[this.fathertime].name;
      this.pagenum = constant.TimeTabData[this.fathertime].num;
    },
    xDataExpand(dateArr) {
      const threshHold = 15
      if (dateArr.length > threshHold) {
        return dateArr
      }

      let count = dateArr.length;
      let year = Number(dateArr[dateArr.length - 1].slice(0, 4))
      let month = Number(dateArr[dateArr.length - 1].slice(5, 7))
      let date = Number(dateArr[dateArr.length - 1].slice(8, 12))
      let now = new Date(year, month - 1, date);

      now.setDate(now.getDate() + 1);
      while (count < threshHold) {
        dateArr.push(tools.DateFormat(now, year + '/MM/dd'))
        now.setDate(now.getDate() + 1);
        count++;
      }

      return dateArr
    }
  },
  beforDestroy() {
    echarts.dispose(this.AssetChart)
  }
}
</script>
<style scoped>
.myAsset{
  height: 210px;
  padding-bottom: 0.4rem;
}
ul {
  display: inline-block;
  font-size: 0.12rem;
  margin-top: 0.1rem;
  color: #555;
  text-align: center;
}

ul li {
  display: inline-block;
  width: 100%;
  height: 0.23rem;
}

ul li:first-child {
  margin-top: 0.2rem;
}

ul li:nth-child(n+2) {
  margin-top: 0.15rem;
}

ul li .li-left {
  display: inline-block;
  width: 0.17rem;
  height: 0.17rem;
  margin-left: -0.3rem;
}

ul li .li-left img {
  display: inline-block;
  width: 0.17rem;
  height: 0.17rem;
  vertical-align: middle;
}

ul li .li-center {
  display: inline-block;
  width: 1rem;
  height: 0.17rem;
  line-height: 0.17rem;
  margin-left: 0.05rem;
  margin-top: 0.01rem;
  text-align: left;
}

ul li .li-right {
  display: inline-block;
  width: 0.6rem;
  height: 0.17rem;
  line-height: 0.17rem;
  margin-top: 0.01rem;
  margin-left: 0.5rem;
}
</style>
